<template>
  <div class="container">
    <el-dialog
      title="绑定商品"
      :visible.sync="bindingDialog.centerDialogVisible"
      width="640px"
      center
      :lock-scroll="true"
      @closed="hideDialog"
      @open="getData"
    >
      <div class="search">
        <el-select
          size="small"
          v-model="outer.value"
          :multiple="false"
          filterable
          remote
          reserve-keyword
          placeholder="请输入商品"
          :remote-method="remoteMethod"
          :loading="outer.loading"
          @change="eslectCode(outer.value,outer.options)"
        >
          <el-option
            v-for="item in outer.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          class="add"
          size="small"
          type="primary"
          icon="el-icon-circle-plus"
          @click="addShopping"
        >添加</el-button>
      </div>
      <el-table :data="gridData" border>
        <el-table-column property="name" label="商品" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletes(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { commodityList } from "@/api/commodity/commodityList";
import { getSupplierGoods, bindGoods } from "@/api/supplier/supplierList";
export default {
  props: {
    bindingDialog: Object
  },
  data() {
    return {
      optionList: [],
      searchArr: [],
      outer: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      gridData: []
    };
  },
  methods: {
    //获取数据
    getData() {
      this.outer = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
      let data = {
        supplier_id: this.bindingDialog.id
      };
      getSupplierGoods(data).then(res => {
        if (res.code == 0) {
          this.gridData = res.data;
        }
      });
    },
    //获取商品列表
    getCommodityList(query) {
      let data = {
        search: query,
        page: 1,
        limit: 100
      };
      this.outer.loading = true;
      commodityList(data).then(res => {
        this.optionList = res.data.data;
        this.outer.options = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
        this.outer.loading = false;
        // this.outer.options = this.outer.list.filter(item => {
        //   return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        // });
      });
    },
    //搜索商品数据
    remoteMethod(query) {
      if (query !== "") {
        this.getCommodityList(query);
      } else {
        this.outer.options = [];
      }
    },
    //获取搜索框数据
    eslectCode(code, list) {
      this.searchArr = list.filter(res => {
        return res.value == code;
      });
    },
    //添加
    addShopping() {
      if (this.searchArr.length == 1) {
        let bool = false;
        if (this.gridData.length != 0) {
          bool = this.gridData.find(res => {
            return res.goods_id == this.searchArr[0].value;
          });
        }
        if (!bool) {
          this.gridData.push({
            goods_id: this.searchArr[0].value,
            name: this.searchArr[0].label
          });
        } else {
          this.$message({
            type: "error",
            message: "该供应商已选择该商品"
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请输入商品"
        });
      }
    },
    //关闭
    hideDialog() {
      this.bindingDialog.centerDialogVisible = false;
    },
    //删除
    deletes(scope) {
      let goods_id = scope.row.goods_id;
      this.gridData.forEach((res, index) => {
        if (res.goods_id == goods_id) {
          this.gridData.splice(index, 1);
        }
      });
    },
    //提交
    confirm() {
      let arrList = [];
      this.gridData.forEach(res => {
        arrList.push(res.goods_id);
      });
      let data = {
        supplier_id: this.bindingDialog.id,
        goods_id: arrList
      };
      bindGoods(data)
        .then(res => {
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.hideDialog();
            this.$emit("upData");
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.search {
  display: flex;
  width: 250px;
  margin-bottom: 10px;
}

.add {
  margin-left: 10px;
}
</style>